<template>
  <div class="main">
    <div class="flex flex-row items-center header">
      <img src="@/assets/logo.svg" class="logo" alt="logo" />
      <p class="ml-4 title">{{ appName }}</p>
    </div>
    <a-form id="formLogin" class="user-layout-login" ref="formLogin" :form="form" @submit="handleSubmit">
      <!-- 错误提示 -->
      <a-alert v-if="isLoginError" type="error" showIcon :message="loginErrorMsg" />
      <a-form-item>
        <a-input
          class="login-input"
          size="large"
          type="text"
          placeholder="请输入用户名"
          v-decorator="[
            'username',
            {
              initialValue: '',
              rules: [{ required: true, message: '您还没有输入用户名' }],
              validateTrigger: 'change',
            },
          ]"
        >
          <a-icon theme="outlined" slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          class="login-input"
          size="large"
          type="password"
          autocomplete="off"
          placeholder="请输入用户密码"
          v-decorator="[
            'password',
            {
              initialValue: '',
              rules: [{ required: true, message: '您还没有输入用户密码' }],
              validateTrigger: 'blur',
            },
          ]"
        >
          <a-icon theme="outlined" slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
        </a-input>
      </a-form-item>
      <a-form-item style="margin-top: 24px">
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="login-button"
          :loading="loading"
          :disabled="loading"
          >确定</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup lang="ts">
import { useForm } from '/@/use/useForm'
import { timeFix } from '@/utils/util'
import { useGlobSetting } from '@/hooks/setting'
import { onMounted, ref } from 'vue'
import { useMessage } from '/@/hooks/web/useMessage'
import { useUserStore } from '@/store/modules/user'
import { isDevMode } from '@/utils/env'
import { useI18n } from '@/hooks/web/useI18n'

// 多语言
const { t } = useI18n()

const { login } = useUserStore()
// 消息
const { notification, createErrorModal } = useMessage()

// 表单定义
const [form, { validateFields, setFieldsValue }] = useForm()

//  全局变量
const globSetting = useGlobSetting()
const appName = globSetting.title

// 变量定义
const loginErrorMsg = ref('')
const isLoginError = ref(false)
const loading = ref(false)

// 页面加载
onMounted(() => {
  if (isDevMode()) {
    setFieldsValue({ username: 'ssjadmin', password: 'ssjadmin' })
  }
})

/**
 * 表单提交: 确定登录
 */
const handleSubmit = (e: any) => {
  e.preventDefault()
  // 表单验证
  validateFields(['username', 'password'], { force: true }, async (err, values) => {
    if (!err) {
      loading.value = true
      isLoginError.value = false
      try {
        await login({ ...values, mode: 'none' })
        notification.success({
          message: t('sys.login.loginSuccessTitle'),
          description: `${timeFix()}，欢迎回来`,
          duration: 3,
        })
      } catch (error: any) {
        isLoginError.value = true
        loginErrorMsg.value = error?.message || error
        createErrorModal({
          title: t('sys.api.errorTip'),
          content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
          getContainer: () => document.body,
        })
      } finally {
        loading.value = false
      }
    }
  })
}
</script>

<style lang="less" scoped>
.header {
  margin-bottom: 40px;
  text-align: center;

  .logo {
    height: 50px;
    vertical-align: top;
    border-style: none;
    // margin-bottom: 20px;
  }

  .title {
    font-size: 20px;
    color: #6c7293;
    font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: relative;
    // margin: 0;
  }
}

.user-layout-login {
  label {
    font-size: 14px;
  }

  ::v-deep .login-input .ant-input {
    border: none;
    background: rgba(235, 237, 242, 1);
    border-radius: 5px;
    font-size: 14px;
    line-height: 58px;
    height: 58px;
  }

  ::v-deep .ant-form-explain {
    margin-top: 5px;
    // color: rgba(245, 34, 45, 0.8);
    // color: rgba(0, 0, 0, 0.45);
  }

  .login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 58px;
    width: 100%;
    margin-top: 20px;
    box-shadow: 0px 4px 16px 0px rgba(34, 185, 255, 0.15);

    &:hover {
      box-shadow: 0px 9px 16px 0px rgba(34, 185, 255, 0.25) !important;
    }
  }

  .ant-alert-error {
    margin-bottom: 24px;
    background-color: #fffbfb;
  }
}
</style>
